<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:utils="http://java.sun.com/jsf/composite/utils"
      xmlns:p="http://primefaces.prime.com.tr/ui"
        >
<f:view locale="#{localizer.locale}" contentType="text/html"/>

<h:head>
    <link href="resources/styles/main.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/reset.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/style.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/stimenu.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="./resources/js/validator.js"/>
    <h:outputScript library="primefaces" name="jquery/jquery.js"/>
    <title>#{m.title_shoppingCart}</title>
</h:head>

<h:body>
    <utils:menuComponent id="ccId"/>

    <div class="cart-container">


        <div class="empty-cart">#{showProducts.emptyCartNotifier}</div>
        <br/>
        <h:outputLink value="index.xhtml" rendered="#{!showProducts.formRendered}">#{m.back_to_main}</h:outputLink>

        <p:ajaxStatus style="width:16px;height:16px;">
            <f:facet name="start">
                <h:graphicImage value="resources/img/ajax-loader.gif"/>
            </f:facet>

            <f:facet name="complete">
                <h:outputText value=""/>
            </f:facet>
        </p:ajaxStatus>


        <h:form id="sCart" onsubmit="return validator();" rendered="#{showProducts.totalRendered}">

            <table class="shoppingCart" cellpadding="14">
                <h:outputText class="shoppingCart-label" rendered="#{showProducts.formRendered}">#{m.cart}</h:outputText>
                <tbody>




                <ui:repeat value="#{showProducts.in}" var="cart">


                    <input type="hidden" value="#{cart.price}"/>


                    <tr>
                        <td><h:graphicImage value="#{cart.imgPath}" class="image-cart" title="#{cart.name}"/></td>
                        <td style="padding-left:12px"><h:outputText value="#{cart.name}"/></td>
                        <td style="padding-left:12px"><h:outputText value="#{cart.price}" id="price"/>&nbsp;#{m.uah}./шт.</td>
                        <td style="padding-left:12px"><p:spinner min="1" value="#{cart.count}" immediate="true" styleClass="product-count"><p:ajax
                                process="@this"
                                update="count,:sCart:subTotal,:ccId:cCart:ccSizeId,:ccId:cCart:ccTotId"/></p:spinner>
                        </td>

                        <td style="padding-left:12px"><h:outputText value="#{cart.totalPrice}" id="count"/>&nbsp;#{m.uah}.</td>


                        <td id="product-quantity">
							<p:commandButton value="&#215;" actionListener="#{showProducts.removeOrder}"
                                             process="@form" update="@form,:ccId:cCart:ccSizeId,:ccId:cCart:ccTotId"
                                             immediate="true" style="color:red;cursor:pointer;font-weight:bold;" title='удалить из корзины'>
                                <f:attribute name="remove" value="#{cart.name}"/>
                            </p:commandButton>
                        </td>
                    </tr>

                </ui:repeat>
                <tr rowspan="4">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
					
                        <h:panelGroup rendered="#{showProducts.formRendered}">#{m.total}:&nbsp;<b><h:outputText value="#{showProducts.subTotal}"
                                                                        id="subTotal"/>&nbsp;#{m.uah}.</b></h:panelGroup>
                    </td>
                </tr>
                </tbody>

            </table>

            <h:panelGroup style="margin-top:20px;" rendered="#{showProducts.formRendered}">
	                <fieldset style="border:none;">
	                    <div class="order-info-container">
	                        <label for="name" class="cart-label">#{m.phone}: <em style="color:#75A10D;">*</em></label>
	                        <h:inputText value="#{order.phone}" maxlength="30" id="name" class="order-info phone"/>
	                        <span class="error phone" style="display:none;color:green">#{m.blank_phone}</span>
	                    </div>
	                    <div class="order-info-container"><label for="mail" class="cart-label">#{m.mail}: <em
	                            style="color:#75A10D;">*</em></label>
	                        <h:inputText value="#{order.mail}" maxlength="30" id="mail" class="order-info mail">
	                        </h:inputText>
	                        <span class="error mail" style="display:none;color:green">#{m.uncorrect_mail}</span>
	                    </div>
	                    <div class="order-info-container"><label for="city" class="cart-label">#{m.city}: <em
	                            style="color:#75A10D;">*</em></label>
	                        <h:inputText value="#{order.city}" maxlength="30" id="city" class="order-info city"/>
	                        <span class="error city" style="display:none;color:green">#{m.blank_city}</span>
	                    </div>
	                    <div class="order-info-container"><label for="comments" class="cart-label">#{m.comment}:</label>
	                        <h:inputTextarea value="#{order.extraInfo}" cols="10" id="comments" class="order-info" style="width:160px;"/>
	                    </div>
	                </fieldset>
                <div class="order-button-container">
                    <h:commandButton value="#{m.complete_order}" action="#{showProducts.completeOrder}"
                                     class="button-order"/>
                    <h:outputLink value="index.xhtml" class="continue-shopping">#{m.continue_shopping}</h:outputLink>
                </div>
            </h:panelGroup>


        </h:form>
    </div>


</h:body>


</html>